<template>
  <div class="list-container">
    <!-- 搜索 -->
    <el-row type="flex">
      <el-select v-model="query.bornPlace" placeholder="请选择籍贯" size="medium" class="query-item">
        <el-option v-for="item in bornList" :key="item.code" :label="item.name" :value="item.code">
        </el-option>
      </el-select>
      <el-input v-model="query.name" placeholder="名字" style="width: 200px;" size="medium" clearable class="query-item">
      </el-input>
      <el-select v-model="query.sex" placeholder="请选择性别" size="medium" class="query-item">
        <el-option label="男" :value="1" />
        <el-option label="女" :value="0" />
        <el-option label="保密" :value="-1" />
      </el-select>
      <el-cascader :options="options" v-model="opValue" :props="props" style="width: 250px;" size="medium" clearable
        class="query-item" placeholder="请选择出生地">
      </el-cascader>
      <el-button type="primary" icon="el-icon-search" size="medium" @click="handleQuery">搜索</el-button>
      <el-button type="success" icon="el-icon-refresh" size="medium" @click="setEmptyQuery">重置</el-button>
    </el-row>
    <!-- 表格 -->
    <el-table :data="tableList" height="450px" v-loading="loading" element-loading-text="加载中..." border stripe>
      <el-table-column type="selection" />
      <el-table-column prop="name" label="名字" align="center" />
      <el-table-column prop="political" label="政治面貌" align="center" />
      <el-table-column prop="born" label="籍贯" align="center" />
      <el-table-column prop="sex" label="性别" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.sex === 1 ? 'success' : 'danger'" effect="dark">
            <i :class="scope.row.sex === 1 ? 'el-icon-male' : 'el-icon-female'"></i>
            {{ scope.row.sex | convertSex }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center" />
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" title="编辑" @click="handleEdit(scope.row)"
            style="margin-right: 5px" />
          <el-popconfirm icon="el-icon-info" icon-color="red" title="确定删除此条数据吗？" @confirm="handleConfirm(scope.row.id)">
            <el-button type="danger" slot="reference" icon="el-icon-delete" size="mini" title="删除" />
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑框 -->
    <el-dialog title="身份信息" :visible.sync="dialogVisible" width="500px">
      <el-form :model="form" label-width="80px">
        <el-form-item label="名字" prop="name" required>
          <el-input v-model="form.name" autocomplete="off" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌" prop="political" required>
          <el-input v-model="form.political" autocomplete="off" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="籍贯" prop="born" required>
          <el-input v-model="form.born" autocomplete="off" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex" required>
          <el-select v-model="form.sex" placeholder="请选择性别" style="width: 300px;">
            <el-option label="男" :value="1" />
            <el-option label="女" :value="0" />
            <el-option label="保密" :value="-1" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" prop="age" required>
          <el-input v-model="form.age" autocomplete="off" style="width: 300px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="updateDialog" size="medium">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getArea } from '@/api/gaodeApi'
export default {
  data() {
    return {
      form: {
        name: '',
        political: '',
        born: '',
        sex: '',
        age: undefined
      },
      dialogVisible: false,
      loading: true,
      props: {
        lazy: true, // 懒加载
        label: 'name',
        value: 'name',
        async lazyLoad(node, resolve) {
          const name = node.label || '中国'
          // console.log('node:', node)
          const result = await getArea({ keywords: name })
          const children = result.districts[0].districts
          children.forEach(element => {
            // 县级单位的level字段为district
            element.leaf = element.level === 'district'
          })
          // console.log('children:', children)
          resolve(children)
        }
      },
      options: [],
      opValue: [],
      query: {
        bornPlace: '',
        name: '',
        sex: ''
      },
      tableList: [],
      bornList: [
        { code: 'henan', name: '河南省' },
        { code: 'hebei', name: '河北省' },
        { code: 'shandong', name: '山东省' },
        { code: 'shanxi', name: '山西省' },
        { code: 'beijing', name: '北京市' },
        { code: 'shanghai', name: '上海市' },
        { code: 'guangzhou', name: '广州市' },
        { code: 'shenzhen', name: '深圳市' }
      ]
    }
  },
  methods: {
    handleQuery() {
      console.log(JSON.stringify(this.query))
    },
    setEmptyQuery() {
      this.query = {
        bornPlace: '',
        name: '',
        sex: ''
      }
      this.opValue = []
    },
    getTableList() {
      return [
        { id: 1, name: '张飞', political: '群众', born: '河北涿州', sex: 1, age: 28 },
        { id: 2, name: '刘备', political: '群众', born: '河南郑州', sex: 1, age: 30 },
        { id: 3, name: '关羽', political: '群众', born: '山东郓城', sex: 1, age: 29 },
        { id: 4, name: '宋美龄', political: '群众', born: '中国台湾', sex: 0, age: 18 }
      ]
    },
    async queryArea(params) {
      const areaResult = await getArea(params)
      this.options = areaResult.districts[0].districts
    },
    handleEdit(row) {
      this.dialogVisible = true
      Object.assign(this.form, row)
    },
    handleDelete(id) {
      this.tableList = this.tableList.filter(item => item.id !== id)
    },
    updateDialog() {
      this.tableList = this.tableList.map(val => {
        if (this.form.id === val.id) {
          Object.assign(val, this.form)
        }
        return val
      })
      this.dialogVisible = false
    },
    handleConfirm(id) {
      this.handleDelete(id)
    }
  },
  // 生命周期函数
  mounted() {
    setTimeout(() => {
      this.tableList = this.getTableList()
      this.loading = false
    }, 500)
  },
  filters: {
    convertSex(sex) {
      let sexStr = ''
      switch (sex) {
        case 1:
          sexStr = '男'
          break
        case 0:
          sexStr = '女'
          break
        default:
          sexStr = '未知'
      }
      return sexStr
    }
  }

}
</script>

<style scoped>
.list-container {
  width: 90%;
  margin: 5px auto;
}

.list-container .el-table {
  margin-top: 10px;
}

.query-item {
  margin-right: 10px;
}

.list-container .el-table thead {
  color: #000;
}
</style>
